<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimationFrame</title>
</head>
<style>
  #box {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    left: 10px;
    top: 10px;
  }

  .img {
    width: 100px;
    height: 100px;
  }
</style>

<body>
  <div id="box"> </div>
  <button id="start">start</button>
  <button id="stop">stop</button>
  <button id="reset">reset</button>
  <div id="container"></div>
</body>
<script>
  let animationid = null;
  let isAnimating = false;
  const box = document.getElementById('box');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');

  const resetPosition = () => {
    box.style.left = '10px';
    box.style.top = '10px';
  }
  reset.addEventListener('click', resetPosition)
  function move() {
    let x = box.offsetLeft;
    let y = box.offsetTop;
    box.style.left = x + 1 + 'px';
    box.style.top = y + 1 + 'px';
    if (x < 1000) {
      animationid = requestAnimationFrame(move);
    } else {
      isAnimating = false
    }
  }
  start.addEventListener('click', () => {
    if (isAnimating) return;
    console.log(123);

    isAnimating = true
    animationid = requestAnimationFrame(move);
  })

  stop.addEventListener('click', () => {
    cancelAnimationFrame(animationid)
    isAnimating = false
  })

</script>

</html>